<template>
  <Sheet transprent :round="4" :padding="[0]">
    <view class="flex flex-row flex-start mb-24">
      <Text style="line-height: 32rpx;" :font-size="32" _class="text-weight-b" :label="play?.uiElement?.subTitle.title" />
    </view>

    <ScrollX :height="180" :width="_rpxWidth - 48" :show-bar="false">
      <view :style="style()" class="list-item" v-for="item in list" :key="item.resourceId"
        @click="onNavigateTo(`/pages/topic/index?id=${item.resourceId}`)">
        <Cell transprent :padding="[0]" :margin="[0]" show-avatar :avatar-size="32"
          :avatar="item.uiElement.mainTitle.titleImgUrl" :title="item.uiElement.mainTitle.title" right-icon=""
          title-color="white" />
        <Text color="white" :font-size="20" :label="item.uiElement.subTitle.title" />
        <Cell transprent :padding="[0]" :margin="[0]">
          <template #label>
            <Text style="width: 340rpx;" _class="text-overflow-2" color="white" :font-size="22"
              :label="(item.resourceExtInfo?.user.nickname ?? '') + ': ' + item.resourceExtInfo?.eventMsg" />
          </template>
          <template #right>
            <Image :round="2" :width="70" :height="70" :src="item.resourceExtInfo?.user.avatarUrl" />
          </template>
        </Cell>
      </view>
    </ScrollX>
  </Sheet>
</template>

<script setup lang='ts'>
import { systemStore } from '@/stores';
import type { ResourcesItem, HomePageItem } from '@/types';
import Icon from '@/tmui/components/tm-icon/tm-icon.vue';
import Text from '@/tmui/components/tm-text/tm-text.vue';
import Card from '@/tmui/components/tm-card/tm-card.vue';
import Cell from '@/tmui/components/tm-cell/tm-cell.vue';
import Sheet from '@/tmui/components/tm-sheet/tm-sheet.vue';
import ScrollX from '@/tmui/components/tm-scrollx/tm-scrollx.vue';
import Image from '@/tmui/components/tm-image/tm-image.vue';
import Descriptions from '@/tmui/components/tm-descriptions/tm-descriptions.vue';
import { onNavigateTo } from '@/utils';

const props = defineProps({
  play: {
    type: Object as PropType<HomePageItem>,
    default: null
  }
})
const play = toRef(props, 'play')
const system = systemStore()
const _rpxWidth = uni.$tm.u.torpx(system.systemInfo.windowWidth);

const list = computed(() => {
  let list: ResourcesItem[] = []
  play.value?.creatives.forEach(item => {
    list = [...list, ...item.resources]
  })

  return list
})

const style = () => {
  let R = Math.floor(Math.random() * 130 + 110);
  let G = Math.floor(Math.random() * 130 + 110);
  let B = Math.floor(Math.random() * 130 + 110);
  return {
    background: 'linear-gradient(to right, #FF3A3A, rgba(' + R + ',' + B + ',' + G + ',0.9))'
  };
}
</script>
<style lang='scss' scoped>
.list-item {
  padding: 24rpx;
  width: 480rpx;
  margin-right: 24rpx;
  border-radius: 12rpx;
  padding: 24rpx;
}
</style>